<template>
  <div class="login">
    <section class="form_container">
      <div class="manage_tip">
        <span class="title">欢迎使用，请登录...</span>
        <el-form
          :model="loginUser"
          :rules="rules"
          ref="loginForm"
          label-width="60px"
          class="loginForm"
        >
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="loginUser.email" placeholder="请输入邮箱" name="email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="loginUser.password"
              placeholder="请输入密码"
              name="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')" class="sub-btn">登录</el-button>
          </el-form-item>
          <div class="tiparea">
            <p>
              还没有账号？现在
              <router-link to="/register">注册</router-link>
            </p>
          </div>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
import jwtToken from 'jwt-decode'
export default {
  name: 'login',
  data () {
    return {
      loginUser: {
        email: '',
        password: ''
      },
      rules: {
        email: [
          {
            required: true,
            trigger: 'blur',
            type: 'email',
            message: '邮箱格式不正确'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '密码长度在6~20个字符之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.post('/api/user/login', this.loginUser).then(res => {
            // 获取token
            const { token } = res.data

            // 将token存储到localStorage中
            localStorage.setItem('manageSystemToken', token)

            // 解析token
            const decoded = jwtToken(token)

            // 将解析的token存储到vuex中
            this.$store.dispatch('setAuthenticated', !this.isEmpty(decoded))
            this.$store.dispatch('setUser', decoded)

            // 跳转到登录页面
            this.$router.push('/index/home')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 判断是否为空
    isEmpty (value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === 'object' && Object.keys(value).length === 0) ||
        (typeof value === 'string' && value.trim().length === 0)
      )
    }
  }
}
</script>

<style lang="stylus" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../assets/images/bg.jpg') no-repeat center center;
  background-size: 100% 100%;

  .form_container {
    width: 310px;
    height: 210px;
    position: absolute;
    top: 10%;
    left: 34%;
    padding: 25px;
    border-radius: 5px;
    text-align: center;

    .loginForm {
      margin-top: 20px;
      background-color: #fff;
      padding: 20px 40px 20px 20px;
      border-radius: 5px;
      box-shadow: 0px 5px 10px #ccc;

      .sub-btn {
        width: 100%;
      }

      .tiparea {
        text-align: right;
        font-size: 12px;
        color: #333;

        p a {
          color: #409eff;
        }
      }
    }
  }

  .form_container, .mange_tip, .title {
    font-family: 'Microsoft YaHei';
    fong-weight: bold;
    font-size: 26px;
    color: #fff;
  }
}
</style>
